<template>
    <div>
        <yd-lightbox v-if="showGallery && detail.content && detail.content.image_list" :num="detail.content.image_list.length">
            <yd-flexbox
                :style="row > 0 ? 'padding-right: 5px;padding-top: 5px;' : 'padding-right: 5px;'"
                v-for="(list, row) in _.chunk(detail.content.image_list, 3)" :key="row">
                <yd-flexbox-item v-for="(item, index) in list" :key="item.url">
                    <yd-lightbox-img style="width: 100%;padding-left: 5px;" :src="item.url" :original="item.original"></yd-lightbox-img>
                </yd-flexbox-item>
            </yd-flexbox>

            <yd-lightbox-txt>
                <h1 style="font-size: 15px;margin-bottom: 8px;color: #00c3f5;text-align: right;" slot="top">{{ detail.content.gallery_title }}</h1>
                <div slot="content" style="text-align: right;">
                    <p>{{ detail.content.gallery_desc }}</p>
                </div>
            </yd-lightbox-txt>
        </yd-lightbox>
        <div v-else>
            <p class="prompt">
                <span>没有找到内容</span>
            </p>
        </div>
    </div>
</template>

<script>
module.exports = {
    created () {
        this.$store.dispatch('openGallery', {id: this.gallery, resolve: (data) => {
            this.$store.commit('webar', {
                show: 'default',
                nav: {
                    title: this.detail.content.gallery_title,
                    back: {name: this.detail.content.gallery_channel}
                }
            })
        }})
    },
    data () {
        return {
            gallery: this.$route.params.id
        }
    },
    computed: {
        detail () {
            return this.$store.getters.galleryContent
        },
        showGallery () {
            return this.detail.gallery == this.gallery
        }
    }
}
</script>

<style scoped>
    .prompt {
        margin: .1rem 0;
        text-align: center;
    }
    .prompt > span {
            display: inline-block;
            padding: 0 .18rem;
            font-size: .12rem;
            color: #fff;
            border-radius: .1rem;
            background-color: #dcdcdc;
        }

</style>
